<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="dialogTitle"
    width="30%"
    @close="handleClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="上级菜单" prop="parentId">
        <el-select v-model="form.parentId" placeholder="请选择上级菜单">
          <template v-for="item in menuSelection">
            <el-option :label="item.name" :value="item.id"></el-option>
            <template v-for="child in item.children">
              <el-option :label="child.name" :value="child.id">
                <span>{{ "    -- " + child.name }}</span>
              </el-option>
            </template>
          </template>
        </el-select>
      </el-form-item>

      <el-form-item label="菜单类型" prop="menuType" label-width="100px">
        <el-radio-group v-model="form.menuType">
          <el-radio :label="'M'">目录</el-radio>
          <el-radio :label="'C'">菜单</el-radio>
          <el-radio :label="'F'">按钮</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item label="权限标识" prop="perms">
        <el-input v-model="form.perms" />
      </el-form-item>

      <el-form-item label="路由" prop="path">
        <el-input v-model="form.path" />
      </el-form-item>
      <el-form-item label="组件路径" prop="component">
        <el-input v-model="form.component" />
      </el-form-item>

      <el-form-item label="显示顺序" prop="orderNum">
        <el-input-number
          v-model="form.orderNum"
          :min="1"
          label="显示顺序"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script >
export default {
  props: {
    id: {
      type: Number,
      default: -1,
      required: true,
    },
    dialogTitle: {
      type: String,
      default: "",
      required: true,
    },
    dialogVisible: {
      type: Boolean,
      default: false,
      required: true,
    },
    tableData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      form: {
        id: -1,
        parentId: "",
        menuType: "M",
        icon: "",
        name: "",
        perms: "",
        component: "",
        path: "",
        orderNum: 1,
      },
      rules: {
        // parentId: [{ required: true, message: "请选择上级菜单" }],
        name: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" },
        ],
      },
      menuSelection: [],
    };
  },
  watch: {
    dialogVisible: {
      handler() {
        let id = this.id;
        if (this.id != -1) {
          this.initFormData(id);
        } else {
          this.form = {
            id: -1,
            parentId: "",
            menuType: "M",
            icon: "",
            name: "",
            perms: "",
            component: "",
            path: "",
            orderNum: 1,
          };
        }
      },
    },
    tableData: {
      handler(val) {
        this.menuSelection = JSON.parse(JSON.stringify(val));
        this.menuSelection.unshift({ name: "主目录", id: 0 });
      },
      immediate: true,
    },
  },
  methods: {
    async initFormData() {
      const res = await this.$store.dispatch(
        "menuAdmin/getMenuRowDataById",
        this.id
      );
      if (res.data.code === 200) {
        this.form = res.data.sysMenu;
      } else {
        this.$message.warning("数据获取失败！");
      }
    },
    handleClose() {
      this.form = {};
      this.$emit("closeDialog");
    },
    handleConfirm() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          let res = await this.$store.dispatch("menuAdmin/saveMenu", this.form);
          if (res.data.code == 200) {
            this.handleClose();
            this.$message.success("保存成功");
          } else {
            this.$message.warning("保存失败");
          }
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
